<template>
  <section class="cart_module">
    <section
      v-if="(foods.specifications && !foods.specifications.length) || inCart"
      class="cart_button"
    >
      <transition name="showReduce">
        <span @click="removeOutCart(foods)" v-if="foodNum">
          <icon-svg icon-class="iconminus-circle"></icon-svg>
        </span>
      </transition>
      <transition name="numFade">
        <span class="cart_num" v-if="foodNum">{{ foodNum }}</span>
      </transition>
      <span @click="addToCart(foods)">
        <icon-svg icon-class="iconplus-circle"></icon-svg
      ></span>
    </section>
    <section v-else class="choose_specification">
      <transition name="showReduce">
        <span @click="showReduceTip" v-if="foodNum" class="specs_reduce">
          <icon-svg icon-class="iconminus-circle-gray-copy"></icon-svg>
        </span>
      </transition>
      <transition name="numFade">
        <span class="cart_num" v-if="foodNum">{{ foodNum }}</span>
      </transition>
      <span class="show_chooselist" @click="showChooseList(foods)">选规格</span>
    </section>
  </section>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "",
  data() {
    return {};
  },
  props: ["foods", "shopId", "inCart"],
  computed: {
    ...mapState(["cartList"]),
    shopCart: function () {
      return Object.assign({}, this.cartList[this.shopId]);
    },
    foodNum: function () {
      let category_id = this.foods.category_id;
      let item_id = this.foods.item_id;
      if (
        this.shopCart &&
        this.shopCart[category_id] &&
        this.shopCart[category_id][item_id]
      ) {
        let num = 0;
        Object.values(this.shopCart[category_id][item_id]).forEach((item) => {
          num += item.num;
        });
        return num;
      } else {
        return 0;
      }
    },
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(["ADD_CART", "REDUCE_CART"]),
    //移出购物车
    removeOutCart(foods) {
      if (this.foodNum > 0) {
        if (!this.inCart) {
          this.REDUCE_CART({
            shopid: this.shopId,
            category_id: foods.category_id,
            item_id: foods.item_id,
            food_id: foods.specfoods[0].food_id,
            name: foods.specfoods[0].name,
            price: foods.specfoods[0].price,
            specs: "",
            packing_fee: foods.specfoods[0].packing_fee,
            sku_id: foods.specfoods[0].sku_id,
            stock: foods.specfoods[0].stock,
          });
        } else {
          this.REDUCE_CART({
            shopid: this.shopId,
            category_id: foods.category_id,
            item_id: foods.item_id,
            food_id: foods.food_id,
            name: foods.name,
            price: foods.price,
            specs: foods.specs,
          });
        }
      }
    },
    //加入购物车，计算按钮位置。
    addToCart(foods) {
      if (!this.inCart) {
        this.ADD_CART({
          shopid: this.shopId,
          category_id: foods.category_id,
          item_id: foods.item_id,
          food_id: foods.specfoods[0].food_id,
          name: foods.specfoods[0].name,
          price: foods.specfoods[0].price,
          specs: "",
          packing_fee: foods.specfoods[0].packing_fee,
          sku_id: foods.specfoods[0].sku_id,
          stock: foods.specfoods[0].stock,
        });
      } else {
        this.ADD_CART({
          shopid: this.shopId,
          category_id: foods.category_id,
          item_id: foods.item_id,
          food_id: foods.food_id,
          name: foods.name,
          price: foods.price,
          specs: foods.specs,
        });
      }
      // let elLeft = event.target.getBoundingClientRect().left;
      // let elBottom = event.target.getBoundingClientRect().bottom;
      // this.showMoveDot.push(true);
      // this.$emit("showMoveDot", this.showMoveDot, elLeft, elBottom);
    },
    showReduceTip() {
      this.$emit("showReduceTip");
    },
    showChooseList(foods) {
      this.$emit("showChooseList", foods);
    },
  },
};
</script>
<style scoped lang='scss'>
@import '@/style/mixin';

.showReduce-enter,
.showReduce-leave-to {
  opacity: 0;

  transform: translateX(.8rem);
}

.showReduce-enter-active,
.showReduce-leave-active {
  transition: all .5s ease-out;
}

.numFade-enter,
.numFade-leave-to {
  opacity: 0;
}

.numFade-enter-active,
.numFade-leave-active {
  transition: all .5s;
}

.cart_num {
  padding: 0 .2rem;

  font-size: .8rem;
}

.cart_button {
  display: flex;
}

.show_chooselist {
  display: inline-block;

  padding: .1rem .2rem;

  color: #fff;
  border-radius: 30%;
  background-color: $blue;

  font-size: .5rem;
}

.choose_specification {
  display: flex;
  align-items: center;
}

</style>
